<template>
  <div class="icon-detail">
    <!-- <div class="header">
      <p>外卖首页ICON设置详情</p>
      <div class="back-btn">
        <router-link to="promoteActivity"
          ><i class="el-icon-back"></i> <span>返回</span></router-link
        >
      </div>
    </div> -->
    <div class="content">
      <div class="content-row">
        <div class="keys k1">
          <span>编号:</span>
        </div>
        <div class="key-values">
          <span>1010</span>
        </div>
      </div>
      <div class="content-row">
        <div class="keys">
          <span>外卖首页背景图:</span>
          <span>(2倍图)</span>
        </div>
        <div class="key-values">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img1"
          />
        </div>
      </div>
      <div class="content-row">
        <div class="keys">
          <span>外卖首页背景图:</span>
          <span>(3倍图)</span>
        </div>
        <div class="key-values">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img1"
          />
        </div>
      </div>
      <div class="content-row">
        <div class="keys k2">
          <span>外卖首页ICON:</span>
          <span>(2倍图)</span>
        </div>
        <div class="key-values">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
        </div>
      </div>
      <div class="content-row">
        <div class="keys k2">
          <span>外卖首页ICON:</span>
          <span>(3倍图)</span>
        </div>
        <div class="key-values">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img2"
          />
        </div>
      </div>
      <div class="content-row">
        <div class="keys k3">
          <span>效果缩略图:</span>
        </div>
        <div class="key-values">
          <img
            src="https://gimg2.baidu.com/image_search/src=http%3A%2F%2Fpic.soutu123.com%2Felement_origin_min_pic%2F01%2F40%2F65%2F61573d0bf6a3c2b.jpg%21%2Ffw%2F700%2Fquality%2F90%2Funsharp%2Ftrue%2Fcompress%2Ftrue&refer=http%3A%2F%2Fpic.soutu123.com&app=2002&size=f9999,10000&q=a80&n=0&g=0n&fmt=auto?sec=1667544872&t=ad748ff029d6cfcc27a737a4e7492e59"
            alt=""
            class="img3"
          />
        </div>
      </div>
      <div class="content-row">
        <div class="keys k4">
          <span>生效日期:</span>
        </div>
        <div class="key-values">
          <span>2022-06-01 至 2022-06-18</span>
        </div>
      </div>
      <div class="content-row">
        <div class="keys k1">
          <span>备注:</span>
        </div>
        <div class="key-values">
          <span> 2022年618年中大促活动</span>
        </div>
      </div>
      <div class="content-row">
        <div class="keys k1">
          <span>状态:</span>
        </div>
        <div class="key-values">
          <span>未生效</span>
        </div>
      </div>
      <div class="content-row">
        <div class="keys k4">
          <span>创建时间:</span>
        </div>
        <div class="key-values">
          <span> 2022-05-28 16:45:16</span>
        </div>
      </div>
      <div class="content-row">
        <div class="keys k4">
          <span>修改时间:</span>
        </div>
        <div class="key-values">
          <span> 2022-05-28 16:45:16</span>
        </div>
      </div>
      <div class="content-row">
        <div class="btn-box">
          <button><i class="el-icon-edit-outline"></i>编辑ICON</button>
          <button><i class="el-icon-refresh-left"></i>重新发布</button>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ICONDetail",
};
</script>

<style scoped>
.icon-detail {
  background: #f5f5f5;
}
/* 头部 */
/* .header {
  height: 60px;
  display: flex;
  align-items: center;
  margin-left: 15px;
  margin-right: 15px;
  justify-content: space-between;
}
.header p {
  font-size: 18px;
}
.back-btn {
  font-size: 13px;
} */
.content {
  /* margin-left: 50px;
  margin-right: 50px; */
  /* margin-bottom: 20px; */
  padding: 20px;
  background-color: #ffffff;
  display: flex;
  flex-direction: column;
  border-radius: 5px;
}
.content-row {
  display: flex;
  margin-bottom: 30px;
}
.keys {
  display: flex;
  flex-direction: column;
  margin-right: 60px;
}
.k1 {
  margin-right: 125px;
}
.k2 {
  margin-right: 73px;
}
.k3 {
  margin-right: 86px;
}
.k4 {
  margin-right: 99px;
}

.keys :nth-child(1) {
  font-size: 13px;
  color: #797979;
}
.keys :nth-child(2) {
  font-size: 12px;
  color: #999999;
}
.key-values {
  font-size: 13px;
}
.img1 {
  width: 375px;
  height: 200px;
}
.img2 {
  width: 90px;
  height: 90px;
  margin-right: 10px;
}
.img3 {
  width: 375px;
  height: 350px;
}
.btn-box {
  margin-left: 151px;
}
.btn-box button {
  outline: none;
  border: none;
  background-color: #4e73df;
  color: #fff;
  padding: 5px 10px;
  font-size: 13px;
  border-radius: 3px;
  margin-right: 10px;
  cursor: pointer;
}
.btn-box button:hover {
  background-color: #87a2f2;
}
</style>
